<template>
	<div>
		<h1>新增优惠券</h1>
		
		<table class="mytable" style="width: 40%;">
			<tr>
				<td>优惠券标题</td>
				<td><el-input v-model="form.couponTitle" style="width: 40%;" placeholder="输入优惠券标题"></el-input></td>
			</tr>
			<tr>
				<td>描述信息</td>
				<td>
					<el-input v-model="form.couponInfo" type="textarea" rows="5" placeholder="优惠券描述信息"></el-input>
				</td>
			</tr>
			<tr>
				<td>数量</td>
				<td><el-input v-model="form.number" style="width: 40%;" placeholder="-1表示不限制张数"></el-input></td>
			</tr>
			<tr>
				<td>过期类型</td>
				<td><el-select v-model="form.ttlType">
					<el-option
					      key="0"
					      label="固定时间过期"
					      value="0">
					    </el-option>
					<el-option
					      key="1"
					      label="领取时效过期"
					      value="1">
					    </el-option>
					</el-select>
				</td>
			</tr>
			
			<tr v-if="form.ttlType == 0">
				<td>有效开始时间</td>
				<td>
					<el-date-picker
					      v-model="form.beginTime"
					      type="date"
					      placeholder="选择开始日期">
					    </el-date-picker>
				</td>
			</tr>
			<tr v-if="form.ttlType == 0">
				<td>有效结束时间</td>
				<td>
					<el-date-picker
					      v-model="form.endTime"
					      type="date"
					      placeholder="选择过期日期">
					    </el-date-picker>
				</td>
			</tr>
			
			<tr v-if="form.ttlType == 1">
				<td>有效天数</td>
				<td><el-input v-model="form.days" style="width: 40%;" placeholder="自领取之日有效"></el-input></td>
			</tr>
			
			<tr>
				<td>
					使用限制模板
				</td>
				<td>
					<el-button @click="addLimitTemplate()">+</el-button>
				</td>
			</tr>
			
			<tbody v-for="flimit in form.limits">
				<!-- 选择限制模板的下拉框 -->
				<tr>
					<td></td>
					<td>
						<el-select v-model="flimit.selectLimit" value-key="id" style="margin-top: 5px;"
							placeholder="选择使用限制模板">
							<el-option v-for="limit in limits"
								  :key="limit.id"
								  :label="limit.templateName"
								  :value="limit">
								</el-option>
						</el-select>
					</td>
				</tr>
				
				<!-- 动态的生成当前模板的动态表单 -->
				<tr v-for="item in flimit.selectLimit.formItems">
					<!-- 表单项的标签 -->
					<td>{{item.itemTitle}}</td>
					<td><el-input v-model="flimit.formItemsValue[item.itemName]"></el-input></td>
				</tr>
			
			</tbody>
			
			<tr>
				<td>
					优惠规则模板
				</td>
				<td>
					<el-select v-model="form.rule.templateId" placeholder="选择优惠规则模板" @change="selectRuleTemplate">
						<el-option v-for="rule in rules"
						      :key="rule.id"
						      :label="rule.templateName"
						      :value="rule.id">
						    </el-option>
					</el-select>
					
				</td>
			</tr>
			
			<!-- 根据选中的模板的动态表单项，生成一个动态表单 -->
			<tr v-for="formItem in ruleForms">
				<td>{{formItem.itemTitle}}</td>
				<td><el-input v-model="form.rule.formItemsValue[formItem.itemName]"></el-input></td>
			</tr>
			
			
			
			<tr>
				<td colspan="2">
					<el-button type="success" @click="insertCoupon()">新增优惠券</el-button>
				</td>
			</tr>
		</table>
	</div>
</template>

<script>
	export default{
		data(){
			return {
				form: {
					couponTitle: null,
					couponInfo: null,
					ttlType: null,
					number: -1,
					beginTime: null,
					endTime: null,
					days: null,
					limits: [],
					rule: {
						//规则模板ID
						templateId: null,
						//规则的动态数据
						formItemsValue: {}
					}
				},
				//使用限制的模板集合
				limits: [],
				//优惠规则的模板集合
				rules: [],
				//被选中的优惠规则表单列表
				ruleForms: []
			}
		},
		methods: {
			//查询所有的优惠券模板
			queryCouponTemplates(){
				this.$.ajax({
					url: "/coupon/template/list",
					success: (res) => {
						this.limits = res.limits;
						this.rules = res.rules;
					}
				});
			},
			//添加限制模板
			addLimitTemplate(){
				//新增一个限制模板的对象
				this.form.limits.push({
					//限制模板ID
					templateId: null,
					//限制的动态数据
					formItemsValue: {},
					//当前被选中的限制模板
					selectLimit: ""
				});
			},
			//选中了一个模板
			selectRuleTemplate(templateId){
				//获取选中的模板ID
				console.log("选中的模板：", templateId);
				
				//获取模板的动态表单项
				//查询一个模板对象
				for(var i = 0; i < this.rules.length; i++) {
					if(this.rules[i].id == templateId){
						this.ruleForms = this.rules[i].formItems;
						break;
					}
				}
			},
			//提交优惠券信息
			insertCoupon(){
				//处理一下限制模板的数据
				var limits = this.form.limits;
				for(var i = 0; i < limits.length; i++){
					var selectLimit = limits[i].selectLimit;
					limits[i].templateId = selectLimit.id;
					//删除被选中的模板对象
					// limits[i].selectLimit = null;
				}
				
				console.log(this.form);
				
				//提交优惠券数据给后端服务
				this.$.ajax({
					type: "POST",
					url: "/coupon/insert",
					data: this.form,
					success: (data) => {
						this.$message.success("优惠券添加成功!");
						
						//清空数据
						this.form = {
							couponTitle: null,
							couponInfo: null,
							ttlType: null,
							number: -1,
							beginTime: null,
							endTime: null,
							days: null,
							limits: [],
							rule: {
								//规则模板ID
								templateId: null,
								//规则的动态数据
								formItemsValue: {}
							}
						}
					}
				})
			}
		},
		mounted() {
			this.queryCouponTemplates();
		}
	}
</script>

<style>
	.mytable tr td {
		padding: 5px 0px;
	}
	
	.mytable2 tr td {
		padding: 10px;
	}
</style>